<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Home</title>
   <link rel="stylesheet" type="text/css" href="style/主页.css">
   <link rel="stylesheet" type="text/css" href="style/photo.css">
   <script type="text/javascript">
      var $ = function (id) {return typeof id === "string" ? document.getElementById(id) : id};
//获取tagName
var $$ = function (tagName, oParent) {return (oParent || document).getElementsByTagName(tagName)};
//自动播放对象
var AutoPlay = function (id) {this.initialize(id)};
AutoPlay.prototype = {
   initialize: function (id)
   {
      var oThis = this;
      this.oBox = $(id);
      this.oUl = $$("ul", this.oBox)[0];
      this.aImg = $$("img", this.oBox);
      this.timer = null;
      this.autoTimer = null;
      this.iNow = 0;
      this.creatBtn();
      this.aBtn = $$("li", this.oCount);
      this.toggle();
      this.autoTimer = setInterval(function ()
      {
         oThis.next()
      }, 3000);
      this.oBox.onmouseover = function ()
      {
         clearInterval(oThis.autoTimer)
      };
      this.oBox.onmouseout = function ()
      {
         oThis.autoTimer = setInterval(function ()
         {
            oThis.next()
         }, 3000)
      };
      for (var i = 0; i < this.aBtn.length; i++)
      {
         this.aBtn[i].index = i;
         this.aBtn[i].onmouseover = function ()
         {
            oThis.iNow = this.index;
            oThis.toggle()
         }
      }
   },
   creatBtn: function ()
   {
      this.oCount = document.createElement("ul");
      this.oFrag = document.createDocumentFragment();
      this.oCount.className = "count";
      for (var i = 0; i < this.aImg.length; i++)
      {
         var oLi = document.createElement("li");
         oLi.innerHTML = i + 1;
         this.oFrag.appendChild(oLi)
      }
      this.oCount.appendChild(this.oFrag);
      this.oBox.appendChild(this.oCount)
   },
   toggle: function ()
   {
      for (var i = 0; i < this.aBtn.length; i++) this.aBtn[i].className = "";
      this.aBtn[this.iNow].className = "current";
      this.doMove(-(this.iNow * this.aImg[0].offsetHeight))
   },
   next: function ()
   {
      this.iNow++;
      this.iNow == this.aBtn.length && (this.iNow = 0);
      this.toggle()
   },
   doMove: function (iTarget)
   {
      var oThis = this;
      clearInterval(oThis.timer);
      oThis.timer = setInterval(function ()
      {
         var iSpeed = (iTarget - oThis.oUl.offsetTop) / 5;
         iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
         oThis.oUl.offsetTop == iTarget ? clearInterval(oThis.timer) : (oThis.oUl.style.top = oThis.oUl.offsetTop + iSpeed + "px")
      }, 30)
   }
};
window.onload = function ()
{
   new AutoPlay("box_wwwzzjsnet");
};

   </script>
</head>
<body>
<div class="box">

<div class="topbar">
  <img class="logo" src="picture/3.png" width="200px" height="170px">
  <div class="topnav">
      <ul class="nav">
        <li><a id="H" href="首页.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="content.html">Content</a></li>
        <li><a href="login.html">Log Out</a></li>
        <li><a href="register.html">Register</a></li>
      </ul>
  </div>
</div>
<div class="mid">

   <div class="touming">
   <div class="topic">
      <h2>Welcome To Our Blog</h2>
      <br><p>Life is like the ocean,only the strong-willed person can reach the opposite shore.</p>
      <img class="button_top" src="picture/8.png" alt="go" width="215px">
   </div>
      <div id="box_wwwzzjsnet">
    <div class="list">
        <ul class="photo">
            <li><img src="img/4.jpg" width="700" height="250" /></li>
            <li><img src="img/e.jpg" width="700" height="250" /></li>
            <li><img src="img/5.jpg" width="700" height="250" /></li>
            <li><img src="img/d.jpg" width="700" height="250" /></li>
            <li><img src="img/084.jpg" width="700" height="250" /></li>
        </ul>
    </div>
</div>
   </div>
</div>
<div class="mid2">
   <div class="mid_1">
      <ul class="about">
         <li>
            <h3>Zheng Minzhen's Secondary Pages</h3>
            <br><p>Zheng Minzhen is an optimistic girl.She likes singing,smiling and eating.Although she hardly communicate with you,she can understand what you think.It's unbelievable.  </p>
         </li>
         <li>
             <h3>Zhou Qianqun's Secondary Pages</h3>
            <br><p>Zhou Qianqun is a lovely and special girl.She is too idealistic but emotional.Quietly tell you,she is a violent alcoholic though look small.</p>
         </li>
         <li>
             <h3>Huang Zhenfeng's Secondary Pages</h3>
            <br><p>In my mind,HZF is a warm girl.What I appreciate most is that she cherish she has already had.She always infects other with her smile.She is like a little sun.This girl is deserve to be loved.</p>
         </li>
         <li>
             <h3>Su Liyuan's Secondary Pages</h3>
            <br><p>This girl,is a little crazy,a little silly,a little open.She has a lot of shortcoming,but at the same time,she is considerate.</p>
        </li>
      </ul>

   </div>
         <div class="direct">
            <span><img src="picture/7.png" width="49px" height="49px"></span>
            <span><img src="picture/7.png" width="49px" height="49px"></span>
            <span><img src="picture/7.png" width="49px" height="49px"></span>
            <span><img src="picture/7.png" width="49px" height="49px"></span>

         </div>
          <a href="网页  14电商A班郑敏珍   2014020101045/html/主页.html" target="_blank"><input type="submit" value="Click In Secondary Pages"></a>
          <a href="14电商B 周倩群 48号/2.html" target="_blank"><input type="submit" value="Click In Secondary Pages"></a>
          <a href="14电商B 黄贞凤/终极版本.html" target="_blank"><input type="submit" value="Click In Secondary Pages"></a>
          <a href="苏莉媛二级页面/我的个人信息表.html" target="_blank"><input type="submit" value="Click In Secondary Pages"></a>

</div>
<div class="mid3">
  <article>
     <h1>Sentence</h1>
     <span>If we can only encounter each other rather than stay with each other,then I wish we had never encountered.I would like weeping with the smile rather than repenting with the cry,when my heart is broken ,is it needed to fix?No one indebted for others,while many people don't know how to cherish others.</span>
  </article>
</div>
<footer>
   <div class="foot">
   <div class="con_con">
       <div class="con">
          <ul>
              <h2>Friend</h2>
             <li>What is "Friend"?</li><hr>
             <li>How to make a friend?</li><hr>
             <li>Hurt your friend?</li><hr>
             <li>Save your relationship?</li><hr>
             <li>Tell me something.</li>
          </ul>
       </div>
       <div class="con">
          <ul>
              <h2>Love</h2>
             <li>What is Love?</li><hr>
             <li>How to love?</li><hr>
             <li>Where is love?</li><hr>
             <li>Find True love.</li><hr>
             <li>Others.</li>
          </ul>
       </div>
       <div class="con">
          <ul>
              <h2>Emotion</h2>
             <li>What is emotion?</li><hr>
             <li>Emotion and Reason.</li><hr>
             <li>Control your emotion?</li><hr>
             <li>Are you emotional?</li><hr>
             <li>Good or Bad?</li>
          </ul>
       </div>
       <div class="con">
          <ul>
              <h2>Other</h2>
             <li>love you,love your dog.</li>
             <li><img class="social" src="picture/11.jpg" width="50px" height="50px"></li>
             <li><img class="mail" src="picture/f.jpg" width="50px" height="50px"></li>
             <li><img class="social" src="picture/c.jpg" width="50px" height="50px"></li>
             <li><img class="mail" src="picture/q.jpg" width="50px" height="50px"></li>
             
          </ul>
       </div>
    </div>
   </div>
</footer>
<div class="footerend">
   <p><a href="#">460507640@qq.com</a></p>
   <p><a href="苏莉媛二级页面/我的个人信息表.html" target="_blank">Author:Lili soe</a></p>
</div>

</div>
</body>
</html>